<!-- 使用例子：
<pb-picker ref="pbPicker" keyName="name" title="请选择要查看的量表" :list="list" @selected="onActionClick"></pb-picker>

list: [{
	name: "a",
	value: "0"
}, {
	name: "b",
	value: "1"
}]

或者嵌套数组，支持级联操作
list: [{
	name: "a",
	value: "0",
	xxx:[{
		name: "b",
		value: "0",
		xxx:[
			name: "c",
			value: "0",
		]
	}]
}]

onActionClick(item){
	
}

//弹出组件
this.$refs.pbPicker.show = true -->


<template>
	<u-picker :show="show" :columns="columns" :defaultIndex="defaultIndexTemp" ref="uPicker" :title="titleTemp"
		:keyName="keyNameTemp" confirmColor="var(--uni-color-primary)" @close="close"
		@cancel="cancel" @confirm="confirm" @change="changeHandler"></u-picker>
</template>

<script>
	export default {
		name: "pb-picker",
		props: {
			title: {
				type: String,
				require: false,
			},
			list: {
				type: Array,
				default: () => [],
				require: true
			},
			keyName: {
				type: String,
				default: "name",
				require: false
			},
			defaultIndex: {
				type: Array,
				default: () => []
			},
			deepCheckArray: {
				type: Boolean,
				default: true //是否自动检测嵌套数组，完成级联数据渲染
			}

		},
		data() {
			return {
				show: false,
				columns: [],
				titleTemp: null,
				keyNameTemp: "name",
				defaultIndexTemp: [],
				configColumns: false
			};
		},
		watch: {
			list: {
				handler(val) {
					if (val && val.length > 0) {
						if (Array.isArray(val[0])) {
							//非级联多列选择
							this.columns = val
						} else {
							// 单列或者多列级联
							this.columns = []
							this.columns.push(val)
							if(this.deepCheckArray) {
								let nextData = val
								while (nextData != null) {
									nextData = this.getNextColumnValueData(nextData[0])
									if (nextData) {
										this.columns.push(nextData)
									}
								}
							}
						}

					}
				},
				immediate: true,
				deep: true
			},
			title: {
				handler(val) {
					this.titleTemp = val
				},
				immediate: true
			},
			keyName: {
				handler(val) {
					this.keyNameTemp = val
				},
				immediate: true
			},
			defaultIndex: {
				handler(val) {
					this.defaultIndexTemp = val
				},
				immediate: true
			}
		},
		methods: {
			close() {
				this.show = false
				this.$emit('close')
			},
			cancel() {
				this.show = false
				this.$emit('cancel')
			},
			//找出当前节点下的第一个数组（下一个列数据）
			getNextColumnValueData(currentObj) {
				if(currentObj) {
					let keys = Object.keys(currentObj)
					let key = keys.find(key => Array.isArray(currentObj[key]))
					return key? currentObj[key] : null
				}
				return null
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				let columnIndexTemp = columnIndex

				if(this.deepCheckArray) {
					let nextData = this.getNextColumnValueData(value[columnIndex])
					while (nextData != null) {
						picker.setColumnValues(++columnIndexTemp, nextData)
						nextData = this.getNextColumnValueData(nextData[0])
					}
				}
			},
			confirm(e) {
				this.show = false
				let value = JSON.parse(JSON.stringify(e.value))
				//将选择项的数组节点去除减少无用数据，并添加所选索引
				for (var i = 0; i < value.length; i++) {
					let obj = value[i]
					if(obj) {
						let keys = Object.keys(obj)
						let key = keys.find(key => Array.isArray(obj[key]))
						obj.index = e.indexs[i]
						delete obj[key]
					}
				}
				console.log('【pb-picker】confirm=>' + JSON.stringify(value))
				this.$emit('selected', value, e.indexs)
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>